/*
 * jquery.mnervDoodle.js
 *
 * Functions for capturing and recording modifications to a canvas element,
 * to enable a scratchpad UI for recording doodles.
 *
 * author: Drew Smathers <drew dot smathers at gmail dot com>
 */

var canevaz_init = (function() {
    if (typeof(console) == 'undefined' || !console) {
        console = {
            log : function () {},
            debug : function () {},
            warn : function () {},
            error : function () {}};
    }

    var getopt = function(opts, name, defaultv) {
        return (opts[name])? opts[name] : defaultv;
    };


    var Canevaz = function(opts) {
        console.log("Initalizing Canevaz ... " + opts);
        return this.__init__(opts);
    };

    var noop = function () {};

    var lerp = function(x1, y1, x2, y2, step) {
        var dx = x2 - x1;
        var dy = y2 - y1;
        var d = Math.sqrt(dx*dx + dy*dy);
        if (d < step) {
            return [];
        }
        var steps = d / step;
        var stepx = dx / steps;
        var stepy = dy / steps;
        var x = x1 + stepx;
        var y = y1 + stepy;
        var ct = 0;
        var coords = [];
        while (ct < steps) {
            coords[ct++] = {'x':x,'y':y};
            x += stepx;
            y += stepy;
        }
        return coords;
    }

    Canevaz.prototype = {
        __init__: function(opts) {
            var o = this;
            console.log("__init__ called : " + opts);
            this.mousex = this.mousey = 0;
            this.lastx = this.lasty = -1;
            this._handler = noop;
            this.cvs_elm = $("#" + getopt(opts, "canvas_id", "canevaz"));
            this.offx = this.offy = 0;
            this.ctx = this.cvs_elm[0].getContext('2d');
            //this.ctx = cvs.getContext('2d');
            // XXX
            this.ctx.fillStyle = "rgba(0,0,0,0.5)";
            //$().mousedown(function(e){
            //    self._handler = function(e){self.movePen(e)}});
            //$().mouseup(function(e){self._handler = noop});
            // XXX
            this.widget = new PenWidget(this, {});
            this.widget.init();
            $().mousemove(function(e){o._trackMouse(e)});
            //this.ctx.fillRect(30, 30, 50, 50);
            //var l = lerp(0,0,500,250,5);
            //var i;
            //for (i = 0 ; i < l.length; i++) {
            //    this.ctx.fillRect(l[i].x, l[i].y, 5, 5);
            //}
            //l = lerp(0,250,500,0,5);
            //for (i = 0 ; i < l.length; i++) {
            //    console.log("lerping : " + l[i].x + " " + l[i].y);
            //    this.ctx.fillRect(l[i].x, l[i].y, 5, 5);
            //}
            //l = lerp(500,125,0,125,5);
            //for (i = 0 ; i < l.length; i++) {
            //    this.ctx.fillRect(l[i].x, l[i].y, 5, 5);
            //}
        },

        _trackMouse: function(e) {
            // We have to defer this here.
            //if (this.offy == 0) {
            this.mousex = e.pageX - this.cvs_elm.offset().left;
            this.mousey = e.pageY - this.cvs_elm.offset().top;
            //}
            if (this.widget.active) {
                this.widget.mousemove(e);
            }
            this.lastx = this.mousex;
            this.lasty = this.mousey;
        }

        
    };

    var PenWidget = function(cvs, opts) {
        this.__init__(cvs, opts);
    };

    PenWidget.prototype = {
        __init__: function(cvs, opts) {
            this.opts = opts;
            this.cvs = cvs;
            this.active = false;
        },

        init: function() {
            var o =  this;
            $().mousedown(function(e){ o.mousedown(e) } );
            $().mouseup(function(e){ o.mouseup(e) } );
        },

        mousedown: function(e) {
            var cvs = this.cvs;
            var ctx = cvs.ctx;
            ctx.beginPath();
            var x = cvs.mousex - cvs.offx;
            var y = cvs.mousey - cvs.offy;
            ctx.moveTo(x, y);
            ctx.lineTo(x+1, y+1);
            ctx.stroke();
            this.active = true;
        },

        mousemove: function(e) {
            var cvs = this.cvs;
            var ctx = cvs.ctx;
            //console.log("handler");
            var x = cvs.mousex - cvs.offx;
            var y = cvs.mousey - cvs.offy;
            //console.log("x=" + x + " y=" + y)
            if (x >= 0 && x <= 500 && y > 0 && y <= 250) {
                var lx = cvs.lastx;
                var ly = cvs.lasty;
                //if (this.lasty != -1) {
                    //var l = lerp(lx, ly, x, y, 5);
                    //for (var i = 0; i < l.length; i++) {
                    //    //this.ctx.fillRect(l[i].x, l[i].y, 5, 5);
                    //    ctx.lineTo(l[i].x, l[i].y);
                    //}
                //}
                //this.ctx.fillRect(x, y, 5, 5);
                ctx.lineTo(x, y);
                ctx.stroke();
            } else {
                cvs.lasty = cvs.lastx = -1;
            }            

        }, 

        mouseup: function(e) {
            var ctx = this.cvs.ctx;
            ctx.fill();
            this.active = false;
        }
    }

    var init = function(opts) {
        opts = opts ? opts : {};
        console.log("loading ... " + opts);
        return new Canevaz(opts);
    };
    //alert("returning init : " + init);
    return init;
})(); 




